<template>
  <div id="dept">
    <!-- 面包屑导航部分 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/sys' }">系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>部门管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 核心数据区域 -->
    <el-card shadow="always">
      <el-button type="success" @click="addRow">新建部门</el-button>

      <!-- 数据处理表格 -->
      <el-table :data="lds.filter(data => !search || data.dname.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="部门编号" prop="deptno"></el-table-column>
        <el-table-column label="部门名称" prop="dname"></el-table-column>
        <el-table-column label="部门地址" prop="loc"></el-table-column>
        <!-- 自定义操作列 -->
        <el-table-column fixed="right" label="操作" width="120">
          <template slot="header" slot-scope="scope">
            <input type="hidden" :value="scope" />
            <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
          </template>
          <template slot-scope="scope">
            <el-button @click.native.prevent="modRow(scope.$index, lds)" type="primary" icon="el-icon-edit" circle size="small"></el-button>
            <el-button @click.native.prevent="openDelConfirm(scope.$index, lds)" type="danger" icon="el-icon-delete" circle size="small"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 对话框F放在视觉组件之外  -->
    <el-dialog title="部门详情窗口" :visible.sync="dialogFormVisible">
      <el-form :model="deptform">
        <el-form-item label="部门编号" :label-width="formLabelWidth">
          <el-input :disabled="true" placeholder="新建部门不需要填写" v-model="deptform.deptno" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门名称" :label-width="formLabelWidth"><el-input v-model="deptform.dname" autocomplete="off"></el-input></el-form-item>
        <el-form-item label="部门地址" :label-width="formLabelWidth"><el-input v-model="deptform.loc" autocomplete="off"></el-input></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
export default {
  name: 'DeptView',
  data() {
    return {
      //  二次搜素关键字
      search: '',
      lds: [],
      // 控制对话框
      dialogFormVisible: false,
      deptform: {
        deptno: '',
        dname: '燕山大学',
        loc: '中国河北秦皇岛'
      },
      // 在修改数据过程中，保持旧数据
      olddept: {},
      formLabelWidth: '120px'
    }
  },
  methods: {
    // 打开删除确认对话框
    openDelConfirm(index, lds) {
      const dept = lds[index]
      this.$confirm(`此操作将永久部门:${dept.dname}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteRow(index, lds)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 打开对话框的新建状态
    addRow() {
      this.deptform.deptno = ''
      this.dialogFormVisible = true
    },
    // 打开编辑状态，允许用户输入数据
    modRow(index, rows) {
      this.deptform = rows[index]
      this.dialogFormVisible = true
      //  保持就数据
      this.olddept.deptno = this.deptform.deptno
      this.olddept.dname = this.deptform.dname
      this.olddept.locs = this.deptform.loc
    },
    // 保持数据
    async save() {
      if (this.deptform.deptno === '' || this.deptform.deptno.length === 0) {
        const path = '/dept/add'
        const { data: res } = await this.$axios.put(path, this.deptform)
        if (res.status === 202) {
          this.$message({
            message: '恭喜你，新建资源操作成功，并且页面数据已经刷新！',
            showClose: true,
            type: 'success'
          })
          this.deptform.deptno = res.data
          this.lds.unshift(this.deptform)
        } else {
          console.log(res)
          this.$message({
            message: '很遗憾，新建资源操作失败！',
            showClose: true,
            type: 'error'
          })
        }
      } else {
        const path = '/dept/mod'
        const { data: res } = await this.$axios.post(path, this.deptform)
        if (res.status === 203) {
          this.$message({
            message: '恭喜你，新建资源操作成功，并且页面数据已经刷新！',
            showClose: true,
            type: 'success'
          })
        } else {
          // 理解有困难
          this.deptform.deptno = this.olddept.deptno
          this.deptform.dname = this.olddept.dname
          this.deptform.locs = this.olddept.loc
          this.$message({
            message: '很遗憾，新建资源操作失败！',
            showClose: true,
            type: 'error'
          })
        }
      }

      this.dialogFormVisible = false
    },
    // 删除数据行
    async deleteRow(index, rows) {
      const path = '/dept/' + rows[index].deptno
      const { data: res } = await this.$axios.delete(path)
      // 需要进行返回结果判断s
      if (res.status === 200) {
        this.$message({
          message: '恭喜你，删除操作成功，并且页面数据已经刷新！',
          showClose: true,
          type: 'error'
        })
        this.lds = res.data
      }
    },
    async getAll() {
      const path = '/dept/all'
      const { data: res } = await this.$axios.get(path)
      // 需要进行返回结果判断s
      this.lds = res.data
    }
  },
  // 初次自动加载所有的部门数据
  created() {
    this.getAll()
  }
}
</script>
<style lang="less" scoped>
#dept {
  .el-card {
    margin-top: 12px;
    border-radius: 20px;
  }
}
</style>
